<template>
  <div class="loginWrap">
    <div class="header">
      <van-nav-bar
        title="身份验证"
        left-text="返回"
        left-arrow
        fixed
        @click-left="onClickLeft"
      ></van-nav-bar>
    </div>
    <div class="contentWrap">
      <div v-if="status === 0 && nextNum === 0">
        <van-form @submit="next">
          <van-field
            v-model="username"
            name="账号名称"
            label="账号名称"
            :clearable="true"
          />
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >下一步</van-button
            >
          </div>
        </van-form>
      </div>
      <div class="content" v-if="nextNum === 1">
        <div class="loginWrap">
          <van-form @submit="submit">
            <van-radio-group v-model="radio">
              <van-radio name="1">
                <van-field
                  v-model="safetyProblem1"
                  name="安全问题"
                  label="安全问题"
                  disabled
                  :clearable="true" />
                <van-field
                  v-model="safetyAnswerMy1"
                  name="安全问题答案"
                  label="答案"
                  required
                  :clearable="true"
              /></van-radio>
              <van-radio name="2">
                <van-field
                  v-model="safetyProblem2"
                  name="安全问题"
                  label="安全问题"
                  disabled
                  :clearable="true" />
                <van-field
                  v-model="safetyAnswerMy2"
                  name="安全问题答案"
                  label="答案"
                  required
                  :clearable="true"
              /></van-radio>
            </van-radio-group>
            <div style="margin: 16px">
              <van-button round block type="info" native-type="submit"
                >提交</van-button
              >
            </div>
          </van-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line standard/object-curly-even-spacing
import { getUser } from "@/views/api/api.js";
import { Toast } from "vant";
export default {
  components: {},
  data() {
    return {
      safetyProblem1: "", // 安全问题1
      safetyProblem2: "", // 安全问题2
      safetyAnswer1: "", // 安全问题答案1 正确答案
      safetyAnswer2: "", // 安全问题答案2 正确答案
      safetyAnswerMy1: "", // 安全问题答案1 自己回答答案
      safetyAnswerMy2: "", // 安全问题答案2 自己回答答案
      radio: "1",
      username: "",
      id: "",
      nextNum: 0,
      status: 0, // 0为未登录，1为已登录
    };
  },
  computed: {},
  created() {
    this.init();
  },
  methods: {
    init() {
      this.status = 0;
      this.user = JSON.parse(sessionStorage.getItem("user"));
      if (this.user) {
        this.status = 1;
        this.username = this.user[0].username;
        this.id = this.user[0]._id;
      } else {
        this.status = 0;
      }
      if (this.status) {
        let params = {
          id: this.id,
        };
        this.getUser(params);
      }
    },
    getUser(params) {
      getUser(params).then((res) => {
        if (!res.data.code) {
          // 查询成功
          this.safetyProblem1 = res.data.Info[0].safetyProblem1;
          this.safetyProblem2 = res.data.Info[0].safetyProblem2;
          this.safetyAnswer1 = res.data.Info[0].safetyAnswer1;
          this.safetyAnswer2 = res.data.Info[0].safetyAnswer2;
          this.nextNum = 1;
          this.id = res.data.Info[0]._id;
        } else {
          // 查询失败
          Toast.fail(res.data.msg);
        }
      });
    },
    // 点击保存
    submit() {
      if (this.radio === "1") {
        if (!this.safetyAnswerMy1) {
          Toast.fail("答案不能为空！");
          return;
        }
        if (this.safetyAnswer1 !== this.safetyAnswerMy1) {
          Toast.fail("答案错误！");
        } else {
          this.$router.push({
            name: "ChangePassword",
            query: { id: this.id },
          });
        }
      } else {
        if (!this.safetyAnswerMy2) {
          Toast.fail("答案不能为空！");
          return;
        }
        if (this.safetyAnswer2 !== this.safetyAnswerMy2) {
          Toast.fail("答案错误！");
        } else {
          this.$router.push({
            name: "ChangePassword",
            query: { id: this.id },
          });
        }
      }
    },
    // 点击返回
    onClickLeft() {
      // if (this.status === 0) {
      //   this.$router.push("/login");
      // } else {
      this.$router.go(-1);
      // }
    },
    // 点击下一步
    next() {
      let params = {
        username: this.username,
      };
      this.getUser(params);
      this.status = 0;
    },
  },
};
</script>
<style scoped>
.contentWrap {
  height: calc(100vh - 46px);
  overflow-y: auto;
}
/* 页面可以滚动，但是不出现滚动条 */
.contentWrap::-webkit-scrollbar {
  width: 0;
}
.header {
  height: 46px;
}
.content {
  margin: 0 16px;
}
.logo {
  width: 100%;
}
</style>
